<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
    </div>
    <script>
        Vue.config.productionTip = false;
       const vm = new Vue({
            data(){
                return{
                    msg:'vue的延迟挂载'
                }
            }
        })
        
        //延时绑定案例
        setTimeout(() => {
            vm.$mount('#app')
        }, 2000);   

        // 或者直接下面的写法
        // new Vue({
        //     data(){
        //         return{
        //             msg:'vue的延迟挂载'
        //         }
        //     }
        // }).$mount('#app')

        // 使用el挂载和$mount没有本质上的区别，$mount可用于延时挂载（例如在挂载之前要进行一些其他操作、判断等），之后要手动挂载上


    </script>
</body>
</html>
